<script setup>
import { defineProps, defineEmits, reactive } from 'vue'

const emit = defineEmits(['closed'])

const { showSteps, leaveDetail } = defineProps({
  showSteps: Boolean,
  leaveDetail: {
    type: Object,
    default: {}
  }
})

const handelClosed = () => {
  emit('closed')
}

</script>
<template >
  <el-dialog title="申请休假详情" width="50%" :model-value="showSteps" @closed="handelClosed" >
    <el-steps :active="leaveDetail.applyState > 2 ? 3 : leaveDetail.applyState" finish-status="success" align-center>
      <el-step title="待审核" />
      <el-step title="审核中" />
      <el-step title="审核通过/审核拒绝" />
    </el-steps>
    <el-form label-width="120" label-suffix=":">
      <el-form-item label="休假类型">
        <div>{{ leaveDetail.applyTypeName }}</div>
      </el-form-item>
      <el-form-item label="休假时间">
        <div>{{ leaveDetail.time }}</div>
      </el-form-item>
      <el-form-item label="休假时长">
        <div>{{ leaveDetail.leaveTime }}</div>
      </el-form-item>
      <el-form-item label="休假原因">
        <div>{{ leaveDetail.reasons }}</div>
      </el-form-item>
      <el-form-item label="审批状态">
        <div>{{ leaveDetail.applyStateName }}</div>
      </el-form-item>
      <el-form-item label="审批人">
        <div>{{ leaveDetail.curAuditUserName }}</div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>